import {
  // BrowserRouter as Router,
  Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom';

// 导入自定义 history 对象
import { customHistory } from './utils/history';

// 业务路由组件
import { Layout } from '@/pages/Layout/Layout';
import { Login } from '@/pages/Login/Login';
import { ProfileEdit } from './pages/Edit/ProfileEdit';
import { Article } from './pages/Article/Article';

import { HOC } from './pages/HOC/HOC';
import './App.scss';
import { isAuth } from './utils/token';

function App() {
  const authRoute = () => {
    // 判断用户是否登录
    const isLogin = isAuth();
    if (isLogin) {
      return <ProfileEdit />;
    } else {
      return <Redirect to={'/login'} />;
    }
  };

  return (
    <Router history={customHistory}>
      <div className="app">
        <Switch>
          {/* 路由重定向,使用render属性 */}
          <Route
            exact
            path={'/'}
            render={() => {
              console.log('额外的逻辑处理', '鉴权逻辑处理');
              // if('登录状态'){
              //   return <div>xxx</div>
              // }else{

              // }
              return <Redirect to={'/layout'} />;
            }}
          />
          {/* <Redirect exact path={'/'} to={'/layout'} /> */}
          {/* home */}
          <Route path={'/layout'} component={Layout} />
          {/* <Route path={'/edit'} component={ProfileEdit} /> */}
          <Route path={'/edit'} render={authRoute} />
          {/* 文章详情 */}
          <Route path={'/article/:id'} component={Article} />
          {/* 登录 */}
          <Route path={'/login'} component={Login} />
          <Route path={'/hoc'} component={HOC} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;
